<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>bi数据分析管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript" src="${ctxStatic }/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="${ctxStatic }/highcharts/modules/exporting.js"></script>
	<script src="${ctxStatic}/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
		Highcharts.setOptions({
			lang: {
				contextButtonTitle: "导出菜单",
				downloadJPEG: "下载 JPEG 图片",
				downloadPDF: "下载 PDF 文件",
				downloadPNG: "下载 PNG 图片",
				downloadSVG: "下载 SVG 矢量图片",
				printChart: "图表打印",
				weekdays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
				months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"] ,
				resetZoom: "返回缩放",
				resetZoomTitle: "缩放比1:1"
			}
		});
		
		
		   $('#container').highcharts({
	            chart: {
	            	  zoomType: 'x'
	            },
	            title: {
	                text: '会员储值统计'
	            },
	            xAxis: [{
		        	 type: "datetime",
		        	 dateTimeLabelFormats:{
		        	 	day: '%Y-%m- %d',
		        	 }
		        }],yAxis: [{ // Primary yAxis
		            labels: {
		                format: '{value}元',
		                style: {
		                    color: '#89A54E'
		                }
		            },
		            title: {
		                text: '会员储值',
		                style: {
		                    color: '#000000'
		                }
		            }
		        }],
	            tooltip: {
	                formatter: function() {
	                    var s;
	                    if (this.point.name) { // the pie chart
	                        s = ''+
	                            this.point.name +': '+ this.y +' 元';
	                    } else {
	                        s = ''+
	                        this.series.name +': '+ this.y+'元';
	                    }
	                    return s;
	                }
	            },
	            labels: {
	                items: [{
	                    html: '储值总计',
	                    style: {
	                        left: '40px',
	                        top: '8px',
	                        color: 'black'
	                    }
	                }]
	            },
	            series: [{
	                type: 'column',
	                name: '充值',
	                data:${recharge},
	                pointInterval: 24 * 3600 * 1000,
	                pointStart: Date.UTC(${year},${month-1}, 1)
	            }, {
	                type: 'column',
	                name: '消费',
	                data:${expense},
	                pointInterval: 24 * 3600 * 1000,
	                pointStart: Date.UTC(${year},${month-1}, 1)
	            }, {
	                type: 'column',
	                name: '异常数据',
	                data: ${exception},
	                pointInterval: 24 * 3600 * 1000,
	            	pointStart:Date.UTC(${year},${month-1}, 1)
	            },  {
					                type: 'pie',
					                name: 'Total consumption',
					                data: [{
					                    name: '充值',
					                    y: ${total.recharge},
					                    color: Highcharts.getOptions().colors[0] // Jane's color
					                }, {
					                    name: '消费',
					                    y: ${total.expense},
					                    color: Highcharts.getOptions().colors[1] // John's color
					                }, {
					                    name: '异常数据',
					                    y:  ${total.exception},
					                    color: Highcharts.getOptions().colors[2] // Joe's color
					                }],
					                center: [100, 80],
					                size: 100,
					                showInLegend: false,
					                dataLabels: {
					                    enabled: false
					                }
					            }
	            ]
	        });
	});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/bi/memberRecharge/biRechargeLogList">储值分析</a></li>
	</ul>
	<form id="searchForm" action="${ctx}/bi/memberRecharge/biRechargeLogList" method="post" class="breadcrumb form-search">
		<label>请选择月份：</label>
					<input type="text" class="Wdate" id="d413" name="time" onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'%y-%M'})" value="${time }" />
		<input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"   />&nbsp;&nbsp;
	</form>
	<tags:message content="${message}"/>
	<c:if test="${message ne '当天没有关注的人，请查询其他日期'}">
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</c:if>
</body>
</html>
